<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        /*
        li之间存在8px的间隙；
        <li>换行后会产生换行字符，而它会变成一个空格，当然空格就占用一个字符的宽度。
        方法1：所有<li>排在一行；
        方法二：将<ul>内的字符尺寸直接设为0，将下面样式放入样式表，问题解决。不过浏览器safari不兼容
        方法三就是下面的方法；
        ul{
            letter-spacing: -8px;
        }
        ul li{
            letter-spacing: normal;
        }
         */
        ul{
            letter-spacing: -8px;
        }
        ul li{
            letter-spacing: normal;
        }

        ul li{
            list-style-type: none;
        }
        .wrap{
            width: 600px;
            margin: 100px auto 0;
        }
        .warp li{
            display: inline-block;
            width: 25%;
            height: 150px;
        }
        .part1{
            background-color: red;
        }
        .part2{
            background-color: burlywood;
        }
        .part3{
            background-color: #ff8d73;
        }
        .part4{
            background-color: #B4EEB4;
        }
    </style>
</head>
<body>
<div class="warp">
    <ul>
        <li class="part1"></li>
        <li class="part2"></li>
        <li class="part3"></li>
        <li class="part4"></li>
    </ul>
</div>

</body>
</html>